<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { GridComponent } from 'echarts/components'

// 注册GridComponent组件
echarts.use([GridComponent])

const props = defineProps({
  data: {
    type: Array,
    required: true
  }
})

const chart = ref(null)
const chartInstance = ref(null)

onMounted(() => {
  initChart()
})

watch(() => props.data, () => {
  if (chartInstance.value) {
    updateChart()
  }
}, { deep: true })

const initChart = () => {
  chartInstance.value = echarts.init(chart.value)
  updateChart()

  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    if (chartInstance.value) {
      chartInstance.value.resize()
    }
  })
}

const updateChart = () => {
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        return `${params[0].name}<br/>健康评分: ${params[0].value}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.data.map(item => item.date),
      axisLine: {
        lineStyle: {
          color: '#a0b1d0'
        }
      },
      axisLabel: {
        color: '#a0b1d0',
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#a0b1d0'
        }
      },
      axisLabel: {
        color: '#a0b1d0'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(160, 177, 208, 0.2)'
        }
      }
    },
    series: [
      {
        name: '健康评分',
        type: 'line',
        data: props.data.map(item => item.value),
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#4facfe'
        },
        lineStyle: {
          width: 3,
          color: '#4facfe'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(79, 172, 254, 0.6)' },
            { offset: 1, color: 'rgba(79, 172, 254, 0.1)' }
          ])
        },
        markLine: {
          silent: true,
          lineStyle: {
            color: '#F56C6C'
          },
          data: [
            {
              yAxis: 70,
              name: '注意阈值',
              label: {
                formatter: '注意阈值'
              }
            },
            {
              yAxis: 60,
              name: '警告阈值',
              label: {
                formatter: '警告阈值'
              }
            }
          ]
        }
      }
    ]
  }

  chartInstance.value.setOption(option)
}
</script>

<template>
  <div class="trend-chart-card">
    <div class="card-header">
      <h2><i class="el-icon-data-line"></i> 寿命趋势预测</h2>
    </div>

    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
  </div>
</template>

<style scoped>
.trend-chart-card {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 1vw;
  padding: 0.5vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.3);
  border: 0.1vw solid #2a3a6a;
  height: 40vh;
}

.card-header {
  margin-bottom: 1vw;
}

.card-header h2 {
  font-size: 1.2vw;
  color: #e4e8f0;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.chart-container {
  width: 100%;
  height: calc(100% - 4vw);
}

.chart {
  width: 100%;
  height: 100%;
  font-size: 1vw;
}
</style>